<template>
	<view class="contain-main-box">
		<navigationTop :navigationTitle="titleName" :isBack='true' :isHome="true"></navigationTop>
		<!-- 精密空调详情 -->
		<view class="main-bg" >
			<!-- 主要内容部分 -->
			<view class="main-contain">
				<!-- 主体白色卡片-开始 -->
				<view class="main-card">
					<!-- 头部圆形图标 -->
					<view class="circle">
						<view :class="[ 'jmkt-icon','is-dot', infoData.deviceStatus=='0'?'':'alarm-dot'+infoData.deviceStatus]" :style="{
							'background-image':'url('+$classNameUrl(optionData.deviceType == '5'?'jmkt':'ptkt')+')'
						}"></view>
					</view>
					<!-- 头部标题-开始 -->
					<view class="top-content">
						<view class="mess">
							<u-row align='top' class="top-row">
								<u-col :span="3" class="info-label" text-align="center">名称</u-col>
								<u-col :span="9" class="info-text">{{infoData.deviceName}}</u-col>
							</u-row>
							<u-row align='top' class="top-row"> 
								<u-col :span="3" class="info-label" text-align="center">类型</u-col>
								<u-col :span="9" class="info-text">{{infoData.deviceType}}</u-col>
							</u-row>
						</view>
					</view>
					<!-- 头部标题-结束 -->
					<!-- 中部状态标识内容-开始 -->
					<view class="status-content">
						<text>当前状态</text>
						<text :class="'text-level'+infoData.deviceStatus">{{deviceStatus(infoData.deviceStatus)}}</text>
					</view>
					<!-- 中部状态标识内容-结束 -->
					<!-- 信息描述模块-开始 -->
					<view class="des-box">
						<view class="card">
							<text class="title">状态</text>
							<u-row align='top' class="top-row">
								<u-col :span="6" style="padding:0;">
									<u-row align='top'>
										<u-col :span="6" style="padding:0;" class="info-label">运行状态：</u-col>
										<u-col :span="6" style="padding:0;" class="info-text">{{infoData.runStatus}}</u-col>
									</u-row>
								</u-col>
								<u-col :span="6" style="padding:0;">
									<u-row>
										<u-col :span="6" style="padding:0;" class="info-label">运行模式：</u-col>
										<u-col :span="6" style="padding:0;" class="info-text" >{{infoData.runPattern}}</u-col>
									</u-row>
								</u-col>
							</u-row>
							<u-row align='top' class="top-row" v-if="optionData.deviceType == '5'">
								<u-col :span="6" style="padding:0;">
									<u-row align='top'>
										<u-col :span="6" style="padding:0;" class="info-label">除湿状态：</u-col>
										<u-col :span="6" style="padding:0;" class="info-text" >{{infoData.xeransisStatus}}</u-col>
									</u-row>
								</u-col>
								<u-col :span="6" style="padding:0;">
									<u-row>
										<u-col :span="6" style="padding:0;" class="info-label">加湿状态：</u-col>
										<u-col :span="6" style="padding:0;" class="info-text">{{infoData.humidifierStatus}}</u-col>
									</u-row>
								</u-col>
							</u-row>
						</view>
						<view class="card">
							<text class="title">参数</text>
							<!-- 普通空调参数开始 -->
							<template v-if="optionData.deviceType == '6'">
								<u-row align="top" class="top-row">
									<u-col :span="6" style="padding:0;" >
										<u-row>
											<u-col :span="6" style="padding:0;" class="info-label">运行温度：</u-col>
											<u-col :span="6" style="padding:0;" class="info-text" >{{infoData.runTemp}}</u-col>
										</u-row>
									</u-col>
									<u-col :span="6" style="padding:0;">
										<u-row>
											<u-col :span="6" style="padding:0;" class="info-label">回风温度：</u-col>
											<u-col :span="6" style="padding:0;" class="info-text" >{{infoData.returnTemp}}</u-col>
										</u-row>
									</u-col>
								</u-row>
							</template>
							<!-- 普通空调参数结束 -->
							<!-- 精密空调参数开始 -->
							<template v-if="optionData.deviceType == '5'">
								<u-row align='top' class="top-row" :gutter="0">
									<u-col :span="6" style="padding:0;">
										<u-row align='top'>
											<u-col :span="6" style="padding:0;" class="info-label">送风温度：</u-col>
											<u-col :span="6" style="padding:0;" class="info-text" >{{infoData.blastTemp}}</u-col>
										</u-row>
									</u-col>
									<u-col :span="6" style="padding:0;">
										<u-row>
											<u-col :span="6" style="padding:0;" class="info-label">送风湿度：</u-col>
											<u-col :span="6" style="padding:0;" class="info-text">{{infoData.blastHum}}</u-col>
										</u-row>
									</u-col>
								</u-row>
								<u-row align='top' class="top-row" :gutter="0">
									<u-col :span="6" style="padding:0;">
										<u-row align='top'>
											<u-col :span="6" style="padding:0;" class="info-label">回风温度：</u-col>
											<u-col :span="6" style="padding:0;" class="info-text" >{{infoData.returnTemp}}</u-col>
										</u-row>
									</u-col>
									<u-col :span="6" style="padding:0;">
										<u-row>
											<u-col :span="6" style="padding:0;" class="info-label">回风湿度：</u-col>
											<u-col :span="6" style="padding:0;" class="info-text">{{infoData.returnHum}}</u-col>
										</u-row>
									</u-col>
								</u-row>
								<u-row align='top' class="top-row" :gutter="0">
									<u-col :span="6" style="padding:0;">
										<u-row align='top'>
											<u-col :span="7" style="padding:0;" class="info-label">除湿设定点：</u-col>
											<u-col :span="5" style="padding:0;" class="info-text" >{{infoData.xeransisPoint}}</u-col>
										</u-row>
									</u-col>
									<u-col :span="6" style="padding:0;">
										<u-row>
											<u-col :span="7" style="padding:0;" class="info-label">加湿设定点：</u-col>
											<u-col :span="5" style="padding:0;" class="info-text">{{infoData.humidifierPoint}}</u-col>
										</u-row>
									</u-col>
								</u-row>
								<u-row align='top' class="top-row" :gutter="0">
									<u-col :span="6" style="padding:0;">
										<u-row align='top'>
											<u-col :span="7" style="padding:0;" class="info-label">制冷设定点：</u-col>
											<u-col :span="5" style="padding:0;" class="info-text" >{{infoData.coolPoint}}</u-col>
										</u-row>
									</u-col>
									<u-col :span="6" style="padding:0;">
										<u-row>
											<u-col :span="8" style="padding:0;" class="info-label">冷水阀设定点：</u-col>
											<u-col :span="4" style="padding:0;" class="info-text">{{infoData.waterPoint}}</u-col>
										</u-row>
									</u-col>
								</u-row>
							</template>
							<!-- 精密空调参数结束 -->
						</view>
					</view>
					<!-- 信息描述模块-结束 -->
				</view>
				<!-- tabs组件 -->
				<view class="tabs-content">
					<navTab :tabList="tabList" @changeIndex="changeNav" style="margin-bottom: 30rpx;"></navTab>
				</view>
				<!-- tabs组件 -->
				<!-- 轮播盒子 -->
				<view style="height: 560rpx;">
					<AlarmSwiper :swiperData="swiperData" v-if="refreshSwiper"></AlarmSwiper>
				</view>
				<!-- 轮播盒子 -->
			</view>
		</view>
	</view>
</template>

<script>
	import navTab from '@/components/navTab/navTab.vue';
	import AlarmSwiper from "@/components/alarmSwiper/index.vue";
	import {chooseAlarmLevel,handleSwiperGroup,alarmTabs} from "@/common/utils/index.js";
	import navigationTop from "@/components/navigationTop/index.vue";
	export default{
		components:{navTab,AlarmSwiper,navigationTop},
		data(){
			return{
				titleName:"",
				optionData:{},
				navCurrent:'0', //tab 栏的index
				refreshSwiper:true, //是否重置swiper
				swiperGroup:{}, //swiper组
				swiperData:[], //展示的swiper数组
				tabList:alarmTabs(),
				infoData:{
					deviceName:"",
					deviceType:"",
					deviceStatus:""
				},
				status:{ // 状态
					runStatus:'开机', //运行状态
					runPattern:'制冷', //运行模式
					dehumidificationStatus:'未除湿', //除湿状态
					addDehumidificationStatus:"除湿" //加湿状态
				},
				parameter:{ //参数
					sendTem:'-', //送风温度
					sendDehumidification:"-" ,//送风湿度
					backTem:'24.10℃', //回风温度
					backDehumidification:"57.70%RH", //回风湿度
					removePoint:'-' ,//除湿设定点
					addPoint:'-',//加湿设定点
					coldPoint:'-',//制冷设定点
					coldWaterPoint:'-'//冷水阀设定点
				}
			}
		},
		computed:{
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods:{
			changeNav(val){
				this.refreshSwiper = false;
				this.navCurrent = val
				this.swiperData = this.swiperGroup[this.navCurrent];
				this.$nextTick(()=>{
					this.refreshSwiper = true
				})
			},
			getData(data){
				uni.showLoading({
				    title: '加载中',
						mask: false
				});
				this.$http.httpRequest({
					url:this.$api.deviceDetails,
					methods:"get",
					data:data
				}).then((res)=>{
					uni.hideLoading()
					if(!res){
						return uni.showToast({
							title:"服务器请求失败",
							icon:"none"
						})
					}
					this.infoData = {
						...this.infoData,
						...res.data.deviceDetails
					}
					// 给tab栏赋值
					this.tabList.forEach((item)=>{
						res.data.alarmCount.forEach((its)=>{
							if(item.alarmLevel == its.alarmLevel){
								item['count'] = its.r1
							}
						})
					})
					const swiperData = res.data.alarmList;
					const group = {
						"0":[],
						"1":[],
						"2":[],
						"3":[],
						"4":[]
					}
					const swipers = handleSwiperGroup(group,swiperData,'alarmLevel');
					this.swiperGroup = swipers;
					this.swiperData = this.swiperGroup[this.navCurrent];
				}).catch((err)=>{
					uni.hideLoading()
					uni.showToast({
						title:"服务器异常",
						icon:"none"
					})
				})
			}
		},
		onShow() {
			//5 精密空调 6 普通空调
			if(this.optionData.deviceType == '5'){
				this.titleName = "精密空调";
			}
			if(this.optionData.deviceType == '6'){
				this.titleName = "普通空调";
			}
		},
		onLoad(options){
			this.optionData = {
				...options
			}
			this.getData(options)
		}
	}
</script>

<style scoped lang="scss">
	$info-label: #919297;
	.contain-main-box{
		.main-bg{
			background-color: $main-bg-bgColor;
			.main-contain{
				padding-top: 80rpx;
				.tabs-content{
					width: $baseWidth;
					margin: 0 auto;
				}
				.is-dot::after{
					content: ' ';
					display: block;
					width: 24rpx;
					height: 24rpx;
					// background-color: $dangerColor;
					border-radius: 50%;
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%,-50%);
				}
				.alarm-dot0::after{
					background-color: $level0;
				}
				.alarm-dot1::after{
					background-color: $level1;
				}
				.alarm-dot2::after{
					background-color: $level2;
				}
				.alarm-dot3::after{
					background-color: $level3;
				}
				.alarm-dot4::after{
					background-color: $level4;
				}
				.main-card{
					width: $baseWidth;
					margin: 0 auto 60rpx auto;
					border-radius: $card-box-radius;
					background-color: rgba(255, 255, 255, 0.88);
					padding: 40rpx 22rpx;
					box-shadow: $card-box-shadow;
					position: relative;
					.circle{
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						box-shadow: $card-box-shadow;
						background-color: #FFFFFF;
						position: absolute;
						top: 0;
						left: 32rpx;
						transform: translateY(-55rpx);
						z-index: 20;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						.jmkt-icon{
							width: 70rpx;
							height: 63rpx;
							background-size: contain;
							background-position: 50%;
							background-repeat: no-repeat;
							position: relative;
						}
					}
					.top-content{
						width: 100%;
						position: relative;
						margin-bottom: 40rpx;
						.mess{
							width: 470rpx;
							margin-left: 192rpx;
							.top-row{
								margin-bottom: 20rpx;
								.info-label,
								.info-text {
									font-size: 28rpx;
								}
								.info-label {
									color: $info-label;
								}
								.info-text{
									color: $ky-main-color;
								}
							}
						}
					}
					.status-content{
						text-align: center;
						margin-bottom: 45rpx;
						text{
							&:first-child{
								color: $ky-main-color;
							}
							display: block;
							font-size: 26rpx;
							
						}
						.abnormal{
							color: $dangerColor;
							font-size: 31rpx;
							margin-top: 14rpx;
						}
					}
					.des-box{
						.card{
							background-color: #FFFFFF;
							border-radius: 30rpx;
							box-shadow:  0 0  30rpx #999;
							padding:18rpx 47rpx ;
							margin-bottom: 36rpx;
							.title{
								color: $ky-main-color;
								font-size: 26rpx;
								text-align: center;
								display: block;
								margin-bottom: 38rpx;
							}
							.top-row{
								margin-bottom: 20rpx;
								.info-label,
								.info-text {
									font-size: 26rpx;
								}
								.info-label {
									color: $info-label;
								}
								.info-text{
									color: $ky-main-color;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
